<template>
  <div class="scroll-text-wrap">
    <div :class="scrollType" :name="scrollType">
      <ul>
        <li v-for="(item,index) in _dataList" :key="index">
          <p v-html="item.text"></p>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: 'sxc-scroll-text',
  props: {
    dataList: {
      type: Array,
      default: [],
    },
    scrollType: {
      type: String,
      default: 'scroll-up'
    }
  },
  data () {
    return {
      count: 0, // 当前索引
      intervalId: null, // 定时器ID
      playTime: 2000, // 定时器执行间隔
    }
  },
  computed: {
    _dataList() {
      const { dataList, scrollType } = this
      if (dataList.length === 1) {
        return [...dataList, ...dataList]
      } else {
        return [...dataList]
      }
    }
  },
  created () {
    // 根据不同的动画效果，指定不同的动画时间，可配合底部的css样式修改
    this.getText();
  },
  destroyed () {},
  methods: {
    getText () {}
  }
}
</script>

<style scoped>
.scroll-text-wrap {
  height: 100%;
  width: 100%;
  position: absolute;
  overflow: hidden;
}
.scroll-text-wrap ul {
  padding: 0px;
  margin:0px;
  height: 100%;
  width: 100%;
}
.scroll-text-wrap li {
  height: 100%;
  width: 100%;
  position: absolute;
}
.scroll-text-wrap li p {
  width: 100%;
  text-align: center;
  padding: 5px;
  margin: 0px;
}
/* 向上滚动动画 */
.scroll-up {
  width: 100%;
  position: absolute;
  animation: scrollUp 5s linear infinite;
}
/* 向下滚动动画 */
.scroll-up-linear {
  width: 100%;
  position: absolute;
  animation: scrollDown 5s linear infinite;
}
/* 向左滚动动画 */
.scroll-left {
  width: 100%;
  position: absolute;
  animation: scrollLeft 5s linear infinite;
}
/* 向右滚动动画 */
.scroll-left-linear {
  width: 100%;
  position: absolute;
  animation: scrollRight 5s linear infinite;
}
@keyframes scrollUp {
      from{
        top:0%;
      }
      to {
        top:-100%;
      }
}
@keyframes scrollDown {
      from{
        top:0%;
      }
      to {
        top:100%;
      }
}
@keyframes scrollLeft {
      from{
        left: 0%;
      }
      to {
        left: -100%;
      }
}
@keyframes scrollRight {
      from{
        left:0%;
      }
      to {
        left: 100%;
      }
}
</style>
